<%-- 
Document   : consultarExtintor
Created on : 01/12/2010, 12:35:04 PM
Author     : glpc
Hay que modificar el jsp:
-> Agregar una variable order
-> Agregar la funcion ord
-> por cada atributo agregar la dos imagenes y cambiar los parametros de 
las funciones como se necesiten
Hay que modificar en el Action:
-> Agregar la verificacion de variable vacia y añadirla al where
-> Cambiar el JSONObject por JSONArray
Hay que modificar el DAO
-> Cambiar el JSONObject que devuelve la funcion consultar por JSONArray
--%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<% request.setAttribute("allowed", "Gestionar Sistemas de Extincion");%>
<%@ include file='../Templates/security.jsp' %>

<%-- Para hacer los consultar es necesario:
        - Agregar el método consultar al archivo DAO
        - Modificar el Action
        - Crear un archivo listar
        - NO es necesario un form
--%>
<%-- Estos script se usan para mostrar las consultas y los datos a consultar --%>
<script type="text/javascript">
    // Definición de variables:
    // Estas cambian en todos los script
    var id_piso = "";
    var order = "";
    var sede="";
    var nombre_edificio = "";
    var tipo = "";
    var capacidad = "";
    var fechadesde = "";
    var fechahasta = "";
    var status = "";
    var usado = "";
    var senalizado = "";
    var categoria = "";
    // Estas no cambian
    var offset = 0;
    var tam = 0;
    var limit = 0;
    var order = "";
    var asc = true;


    function consultarExtintor(){
        // Aqui se realiza la consulta a la BD (Cambia en todos los scripr)
        $.getJSON("consultarExtintorAction.do",{id_piso: id_piso,sede:sede,
            nombre_edificio :nombre_edificio,tipo :tipo ,
            capacidad: capacidad, fechadesde:fechadesde, categoria: categoria,
            fechahasta: fechahasta, status: status, usado: usado,
            senalizado: senalizado, limit: limit, offset: offset, order: order},
        function(data) {
            // (Cambia en todos los script)
            // Lo unico que cambia en esta parte es el llamado del método
            if(limit != 0){
                $('#head').empty();
                /* Agregar esta linea*/
                $("#obs").empty();
                $("#obs").append('OBSERVACIÓN: Para ordenar la tabla por un campo específico, presionar el nombre de la columna.');
                /* Agregar esta linea*/
                var head = "<tr>"+
                    "<th class='nosort'>"+
                    "<h14><div class=\"ordenar\" onclick=\"orden('id_nro_bien');\" >   Nro.Bien   </div></h14></th>"+
                    "<th><h14><div class=\"ordenar\" onclick=\"orden('categoria');\" >Categoría</h14></th>"+
                    "<th><h14><div class=\"ordenar\" onclick=\"orden('nombre_sede');\" >Sede</h14></th>"+
                    "<th><h14><div class=\"ordenar\" onclick=\"orden('nombre_edificio');\" >Ubicacion</h14></th>"+
                    "<th><h14><div class=\"ordenar\" onclick=\"orden('tipo');\" >Tipo</h14></th>"+
                    "<th><h14><div class=\"ordenar\" onclick=\"orden('capacidad');\" >Capacidad</h14></th>"+
                    "<th><h14><div class=\"ordenar\" onclick=\"orden('fecha_ultima_recarga');\" >Fecha Última Recarga</h14></th>"+
                    "<th><h14><div class=\"ordenar\" onclick=\"orden('status');\" >Status</h14></th>"+
                    "<th><h14><div class=\"ordenar\" onclick=\"orden('persona_contacto');\" >Persona de Contacto</h14></th>"+
                    "<th><h14><div class=\"ordenar\" onclick=\"orden('senalizado');\" >Senalizado</h14></th>"+
                    "<th><h14><div class=\"ordenar\" onclick=\"orden('usado');\" >Usado</h14></th>"+
                    "<th><h14><div class=\"ordenar\" onclick=\"orden('referencia');\" >Referencia</h14></th>"+
                    "<th><h14>Modificar</h14></th> <!-- Agregar esta linea -->"+
                    "</tr>";
                $('#head').append(head);
                $('#resultado').empty();
                var fila;
                $.each(data.consultarExtintor , function(i,item){
                    // Esto se hace para pintar el fondo de las filas pares e impares. (NO CAMBIA)
                    if ( (i % 2) == 0){
                        fila = "<tr bgcolor = \"#fff\"> ";
                    }
                    else{
                        fila = "<tr bgcolor = \"#ecf2f6\">";
                    }
                    // Aqui se van creando los String para llenar la tabla (Cambia en todos los script)
                    verPlano = "verPlanoExtintores('"+item.nombre_edificio+"','"+item.id_piso+"','"+item.categoria+"');";
                    var string = fila+"<td>"+item.id_nro_bien+"</td>"+
                        "<td>"+item.categoria+"</td>"+
                        "<td>"+item.sede+"</td>"+
                        "<td class='pointer' onclick=\""+verPlano+"\">"+item.nombre_edificio+" - "+(item.id_piso==0? "PB":"P"+item.id_piso)+"</td>"+
                        "<td>"+item.tipo+"</td>"+
                        "<td>"+item.capacidad+"</td>"+
                        "<td>"+item.fecha_ultima_recarga+"</td>"+
                        "<td>"+item.status+"</td>"+
                        "<td>"+item.persona_contacto+"</td>"+
                        "<td>"+item.senalizado+"</td>"+
                        "<td>"+item.usado+"</td>"+
                        "<td>"+item.referencia+"</td>"+
                        "<td ><img onclick='return modificarExtintor("+item.id_nro_bien+");' src='style/images/table_edit1.png' alt='Modificar Extintor' width='20' height='20'></td>"+
                        "</tr>";
                    // <!-- Agregar esta linea -->
                    fila++;
                    $('#resultado').append(string);

                    // Aqui se decide las paginas: Actual y totales (NO CAMBIA)
                    tam = parseInt(item.tam);
                    $("#currentpage").empty();
                    $("#pagelimit").empty();
                    $("#currentpage").append((offset/limit)+1);
                    $("#pagelimit").append(Math.ceil(tam/limit));

                });
            }
            else{
                // Se pinta la tabla en la página. (Cambia en todos los script)
                // Lo unico que cambia en todos los script es el llamado a la función.
                $.each(data.consultarExtintor , function(i,item){
                    tam = parseInt(item.tam);
                });
                limit = 10;
            }
        }
    );
    
        /* Agregar esta linea*/
        document.getElementById('controls').style.visibility="visible";
        /* Agregar esta linea*/
    }
    // Llamamos al método por primera vez
    consultarExtintor();
    // Estas funciones determinan todos los campos de la tabla (Cambia en todos los script)
    function setPiso(piso){
        offset = 0;
        id_piso = piso;
        consultarExtintor();
    }
    function orden(key){
        if (asc == true){
            order = "order by "+key+" asc ";
            consultarExtintor();
        }
        else{
            order = "order by "+key+" desc ";
            consultarExtintor();
        }
        asc = !asc;
    }
    function setSede(piso){
        offset = 0;
        sede = piso;
        consultarExtintor();
    }
    function setEdificio(piso){
        offset = 0;
        nombre_edificio = piso;
        consultarExtintor();
    }
    function setTipo(piso){
        offset = 0;
        tipo = piso;
        consultarExtintor();
    }
    function setCapacidad(piso){
        offset = 0;
        capacidad = piso;
        consultarExtintor();
    }
    function setFechaDesde(piso){
        offset = 0;
        fechadesde = piso;
        consultarExtintor();
    }
    function setFechaHasta(piso){
        offset = 0;
        fechahasta = piso;
        consultarExtintor();
    }
    function setStatus(piso){
        offset = 0;
        status = piso;
        consultarExtintor();
    }
    function setUsado(piso){
        offset = 0;
        usado = piso;
        consultarExtintor();
    }
    function setSenalizado(piso){
        offset = 0;
        senalizado = piso;
        consultarExtintor();
    }

    // Se fija el número de páginas totales de la consulta (NO CAMBIA)
    function setLimit(piso){
        offset = 0;
        limit = parseInt(piso);
        consultarExtintor();
    }

    // Se fijan los alcances de las flechas primera, última, siguiente y anterior (NO CAMBIA)
    function setOffset(i, completo){
        if(completo && (i==-1)){
            offset = 0;
        }
        else if(completo && (i==1)){
            offset = Math.floor((tam-1)/limit)*limit;
        }
        else if(!completo && i==-1){
            if(offset>=limit){
                offset -= limit;
            }
        }
        else{ //!completo && i==1
            if(offset<tam-limit){
                offset += limit;
            }
        }
        consultarExtintor();
    }


    // Script que coloca la información de la base de datos en los select
    //(Cambia en todos los script)
    $.getJSON("listarExtintores.do",
    function(data) {
        $.each(data.consultarExtintores.id_piso, function(i,item){
            var string = "<option value='"+item+"' >"+item+"</option>";
            $('#id_piso').append(string)
        });
        $.each(data.consultarExtintores.sede, function(i,item){
            var string = "<option value='"+item+"' >"+item+"</option>";
            $('#sede').append(string)
        });
        $.each(data.consultarExtintores.nombre_edificio, function(i,item){
            var string = "<option value='"+item+"' >"+item+"</option>";
            $('#nombre_edificio').append(string)
        });
    });
    function setCategoria(cat){
        if (cat == "Extintor"){
            $('#status').empty();
            $('#status').append("<option value=''>Cualquiera</option>");
            $('#status').append("<option value='Cargado'>Cargado</option>");
            $('#status').append("<option value='Descargado'>Descargado</option>");
            $('#status').append("<option value='Nuevo'>Nuevo</option>");
            $('#status').append("<option value='Dañado'>Dañado</option>");
            $('#status').append("<option value='Operativo'>Operativo</option>");
            $('#status').append("<option value='En Mantenimiento'>En Mantenimiento</option>");
        }
        else{
            $('#status').empty();
            $('#status').append("<option value=''>Cualquiera</option>");
            $('#status').append("<option value='Nuevo'>Nuevo</option>");
            $('#status').append("<option value='Dañado'>Dañado</option>");
            $('#status').append("<option value='Operativo'>Operativo</option>");
            $('#status').append("<option value='En Mantenimiento'>En Mantenimiento</option>");
        }
        categoria = cat;
        consultarExtintor();
    }

    function verPlanoExtintores(edificio,piso,categoria){
        loadPlanoExtintores(edificio,piso,categoria,false);
        $('.formularioExtintor').css('display','none');
        $('#ubicacionPlano').css('display','block');
    }
</script>
<h1 class="title">Gestión del Sistema de Extinción</h1>
<p class="meta"></p>
<div class="entry">
    <center>
        <h2>Consultar Equipo de extinción</h2>
        <div class="formularioExtintor">
            <table>
                <tbody>
                    <tr>
                        <td>Categoría :</td>
                        <td>
                            <select name="categoria" id="categoria" onchange="setCategoria(value)">
                                <option value="" selected>Cualquiera</option>
                                <option value="Rociador">Rociador</option>
                                <option value="Extintor">Extintor</option>
                                <option value="Hidrante">Hidrante</option>
                                <option value="Manguera">Manguera</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>Sede :</td>
                        <td>
                            <select id="sede" name="sede" onchange="setSede(value)">
                                <option value="">Cualquiera</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>Nombre Edificio :</td>
                        <td>
                            <select id="nombre_edificio" name="nombre_edificio" onchange="setEdificio(value)">
                                <option value="">Cualquiera</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>Piso :</td>
                        <td>
                            <select id="id_piso" name="id_piso" onchange="setPiso(value)">
                                <option value="">Cualquiera</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>Tipo :</td>
                        <td><input id="tipo" name="tipo" onchange="setTipo(value)"/></td>
                    </tr>
                    <tr>
                        <td>Capacidad :</td>
                        <td><input id="capacidad" name="capacidad" onchange="setCapacidad(value)"/></td>
                    </tr>
                    <tr>
                        <td> Desde: Fecha de la Última Recarga :</td>
                        <td><input  name="fecha_ultima_recarga_desde"  class="fechaI" onchange="setFechaDesde(value)"/></td>
                    </tr>
                    <tr>
                        <td> Hasta: Fecha de la Última Recarga :</td>
                        <td><input name="fecha_ultima_recarga_hasta" class ="fechaI" onchange="setFechaHasta(value)"/></td>
                    </tr>
                    <tr>
                        <td>Estado :</td>
                        <td>
                            <select id="status" name="status" onchange="setStatus(value)">
                                <option value="">Cualquiera</option>
                                <option value="Cargado">Cargado</option>
                                <option value="Descargado">Descargado</option>
                                <option value="Nuevo">Nuevo</option>
                                <option value="Dañado">Dañado</option>
                                <option value="Operativo">Operativo</option>
                                <option value="En Mantenimiento">En Mantenimiento</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>Señalizado :</td>
                        <td>
                            <select name="senalizado" onchange="setSenalizado(value)">
                                <option value="">Cualquiera</option>
                                <option value="si">Si</option>
                                <option value="no">No</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>Usado :</td>
                        <td>
                            <select name="usado" onchange="setUsado(value)">
                                <option value="">Cualquiera</option>
                                <option value="si">Si</option>
                                <option value="no">No</option>
                            </select>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br>
            <html:button property="" styleId="extintores" value="  Atrás  "/>
            <html:button property="" value="  Mostrar Todo  " onclick="consultarExtintor()"/>
            <br><div style="clear: both;">&nbsp;</div><br>

            <div id="obs"></div><br>
        </div>
    </center>
    <div id="ubicacionPlano" style="display: none;">
        <div id="mapPisoMsg">Para modificar la ubicaci&oacute;n y otros datos presione modificar al final de la tabla.</div>
        <div id="mapPiso"></div>
        <center>
            <input type="button"  id="atrasUbicacion_btn" value="  Atras  "/>
        </center>
    </div>
    <center>
        <%-- AQUI COMIENZA LA IMPRESION DE LA TABLA DE RESULTADOS --%>
        <div id="consultarExt" style="overflow:auto;">
            <table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">
                <thead id="head"></thead>
                <tbody id="resultado"></tbody>
            </table>
            <%-- Aquí se manejan las flechas, cantidad de paginas a mostrar y numero de pagina --%>
            <%@ include file="../Templates/paginasTabla.jsp" %>
        </div>
        <div style="clear: both;">&nbsp;</div>
    </center>
</div>
<div style="clear: both;">&nbsp;</div>
<script type="text/javascript" src="Modulo2/js/controlPiso.js" />
<script type="text/javascript">
    $(document).ready(function() {
        $(".fechaI").datepicker({
            dateFormat: 'dd/mm/yy',
            maxDate: new Date(),
            showOn: "button",
            buttonImage: "style/images/calendar.gif",
            buttonText: "calendario"
        }).attr('readonly', true);
    });
</script>
<script type="text/javascript">
    /* Agregar esta linea*/
    document.getElementById('controls').style.visibility="hidden";
    /* Agregar esta linea*/
</script>

